<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<title>待办任务</title>
<meta name="decorator" content="default" />
<script type="text/javascript">

	/**
	 * 签收任务
	 */
	function claim(taskId) {
		$.get('${ctx}/act/task/claim', {
			taskId : taskId
		}, function(data) {
			//alert(111);
			if (data == 'true') {
				top.$.jBox.tip('签收完成');
				location = '${ctx}/act/task/todo/';
			} else {
				top.$.jBox.tip('签收失败');
			}
		});
	}

	/**
	 * 签收并触发
	 */
	function claimAndOpencreateWindow(taskId, index, url) {
		$.get('${ctx}/act/task/claim', {
			taskId : taskId
		}, function(data) {
			if (data == 'true') {
				//top.$.jBox.tip('签收完成');
				//location = '${ctx}/act/task/todo/';
				var openId = "#opencreateWindow_" + index;
				//$(openId).click();
				var readId = "#read_" + index;
				$(readId).text("是");
				opencreateWindow(url+"?id="+index,"审批信息",1000,600,"10px");
				
			} else {
				top.$.jBox.tip('读取失败！');
			}
		});
	}
	
	
	function shenpi(){
		var checked=$("#contentTable").find("tbody>tr").find("input[type=checkbox]:checked");
		if(checked.length==0){
			top.$.jBox.tip("请选择一条数据");
			return false;
		}
		if(checked.length>1){
			top.$.jBox.tip("不能同时选择多条数据操作");
			return false;
		}
		
		var url = $(checked[0]).attr("data-url");
		var id = $(checked[0]).attr("data-id");
		var taskId = $(checked[0]).attr("data-task-id");
		
		var readId = "#read_" + id;
		var readText = $(readId).text();
		
		if(readText == "是"){
			opencreateWindow(url+"?id="+id,"审批信息",1200,600,"10px");
		}else{
			
			claimAndOpencreateWindow(taskId, id, url);
				
		}
		
		
	}
	
	function genzong(){
		
		var checked=$("#contentTable").find("tbody>tr").find("input[type=checkbox]:checked");
		if(checked.length==0){
			top.$.jBox.tip("请选择一条数据");
			return false;
		}
		if(checked.length>1){
			top.$.jBox.tip("不能同时选择多条数据操作");
			return false;
		}
		
		var processDefinitionId=$(checked[0]).attr("data-processDefinitionId");
		var executionId=$(checked[0]).attr("data-executionId");
		
		window.open("${ctx}/act/task/trace/photo/"+processDefinitionId+"/"+executionId); 
		//window.parent.location.target="_blank";
		//window.parent.location.href=";
	}
	
	
	function doSearch(){
		$("#searchForm").submit();
	}
</script>
</head>
<body>
     <div class="boxcontent clearfix" >
		<div class="content clearfix">
	    <form:form id="searchForm" modelAttribute="act" action="${ctx}/act/task/todo/" method="get">
		<div class="search-bar">
				<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
				<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
				<sys:tableSort id="orderBy" name="orderBy" value="${page.orderBy}" callback="page();"/>
				<ul class="clearfix">
					<li>
						<span>流程名称：</span>
						<form:input path="actProcDefName" htmlEscape="false" class="form-control"/>
					</li>
				<%-- <li>
					    <span>是否已阅：</span>
					    <c:if test="${empty act.isRead}">
						<select id="isRead" name="isRead" class="input-search">
							<option value="">全部</option>
							<option value="true">已阅</option>
							<option value="false">未阅</option>
						</select>
					</c:if>
					<c:if test="${act.isRead == 'true'}">
						<select id="isRead" name="isRead" class="input-search">
							<option value="">全部</option>
							<option value="true" selected="selected">已阅</option>
							<option value="false">未阅</option>
						</select>
					</c:if>
					<c:if test="${!act.isRead and not empty act.isRead}">
						<select id="isRead" name="isRead" class="input-search">
							<option value="">全部</option>
							<option value="true">已阅</option>
							<option value="false" selected="selected">未阅</option>
						</select>
					</c:if>
					</li> --%>	
					
					<li>
					    <span>申请人：</span>
					    <form:input path="applyUserName" htmlEscape="false" class="form-control"/>
					</li>
					<li>
					    <span>申请部门：</span>
					    <form:input path="applyOrgName" htmlEscape="false" class="form-control"/>
					</li>
				<%--	<li>
					    <span>接收时间开始：</span>
					    <input id="beginDate" name="beginDate" type="text" readonly="readonly" maxlength="20"
						class="form-control Wdate"
						value="<fmt:formatDate value="${act.beginDate}" pattern="yyyy-MM-dd"/>"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" />
					</li>
					<li>
					    <span>到</span>
					    <input id="endDate" name="endDate" type="text" readonly="readonly" maxlength="20"
						class="form-control Wdate"
						value="<fmt:formatDate value="${act.endDate}" pattern="yyyy-MM-dd"/>"
						onclick="WdatePicker({dateFmt:'yyyy-MM-dd'});" />
					</li> --%>
				</ul>
				
				<div id="btn_search" class="search-btn" onclick="doSearch();">查询</div>
				<script type="text/javascript">
					$(function(){
						var showHide = "<a id='showHideIcon' class='down'></a>";
						var initHeight = 80;
						var liLength = $(".search-bar ul li").length;
						var ulWidth = $(".search-bar ul").width();
						var ulHeight;
						var rowLis = parseInt(ulWidth/250);
						if(liLength > rowLis){
							$(".search-bar").height(initHeight);
							$(".search-btn").css("line-height", initHeight+"px");
							$(".search-bar").append(showHide);
							$("#showHideIcon").on("click", function(){
								//展开
								if(!$(this).hasClass("up")){
									var aThis = $(this);
									$(".search-bar ul li").each(function(){
										if($(this).hasClass("hide")){
											$(this).removeClass("hide");
											liWidth($(this));
										}
									});
									ulHeight = $(this).siblings("ul").height();
									$(".search-bar").animate({height: ulHeight+30+"px"}, 300, function(){
										aThis.addClass("up");
									});
									searchHeight();
								}
								//收起
								else{
									$(this).removeClass("up");
									$(".search-btn").animate({lineHeight: initHeight+"px"}, 300);
									$(".search-bar").animate({height: initHeight+"px"}, 300);
									$(".search-bar ul li").each(function(key,val){
										if(key > rowLis-1){
											$(this).addClass("hide");
										}
									});
								}
							});
						}
						$(".search-bar ul li").each(function(key,val){
							if(key > rowLis-1){
								$(this).addClass("hide");
							}
							liWidth($(this));
						});
						//查询按钮高度计算
						function searchHeight(){
							$(".search-btn").animate({lineHeight: ulHeight+30+"px"}, 300);
						}
						//li长度计算
						function liWidth($this){
							var spanWidth = $this.find("span").width();
							$this.find(".form-control").width(230-20-spanWidth);	
							$this.children(".input-append").find(".required").width(230-20-36+1-spanWidth);
						}
					})
				</script>
			</div>
	</form:form>
	
	<div class="btns" style="float: left;border-right: 0px;border-left: 0px;">
		<button  id="doEvent" type="button" class="btn-custom" onclick="shenpi()">任务办理</button>
		<!--  <button  type="button" class="btn-custom" onclick="genzong();">跟踪信息</button>-->
	</div>
	
	<sys:message content="${message}" />
	<table id="contentTable" class="table table-striped table-bordered table-condensed">
		<thead>
			<tr>
				<th><input type="checkbox" disabled/></th>
				<th>操作</th>
				<th>标题</th>
				<th>申请人</th>
				<th>申请部门</th>
				<th>当前环节</th>
				<th>上一步处理人</th>
				<%--
				<th>任务内容</th> --%>
				<th>流程名称</th>
				<th>流程版本</th>
				<th>接收时间</th>
				<%-- <th>是否已阅</th> --%>
			</tr>
		</thead>
		<tbody>
			<c:forEach items="${page.list}" var="act">
				<c:set var="task" value="${act.task}" />
				<c:set var="vars" value="${act.vars}" />
				<c:set var="procDef" value="${act.procDef}" />
				<c:set var="status" value="${act.status}" />
				<tr>
					<td>
						<input type="checkbox" data-task-id="${task.id}" data-url="${act.formUrl}" data-id="${act.businessId}" data-processDefinitionId="${task.processDefinitionId}" data-executionId="${task.executionId}"/>
					</td>
					<td>
					  <a target="_blank" href="${pageContext.request.contextPath}/act/diagram-viewer?processDefinitionId=${task.processDefinitionId}&processInstanceId=${task.processInstanceId}">跟踪信息</a>
					</td>
					<td>
						${fns:abbr(not empty act.vars.map.title ? act.vars.map.title : task.id, 60)}
					</td>
					<td>${act.vars.map.applyUserName}</td>
					<td>${act.vars.map.applyOrgName}</td>
					<td>${task.name}</td>
					<td>${act.previousAssigneeName}</td>
					<%--
					<td>${task.description}</td> --%>
					<td>${procDef.name}</td>
					<td>
						<b title='流程版本号'>V: ${procDef.version}</b>
					</td>
					<td>
						<fmt:formatDate value="${task.createTime}" type="both" />
					</td>
				<%--<td id="read_${act.businessId}">
						<c:if test="${empty task.assignee}">
							 否
						</c:if>
						<c:if test="${not empty task.assignee}">
						           是
						</c:if>
					</td> --%>
				</tr>
			</c:forEach>
		</tbody>
	</table>
	
<jsp:include page="/WEB-INF/views/include/pageJs.jsp" />

	<script>

	//分页
	function page(n, s) {
		$("#pageNo").val(n);
		$("#pageSize").val(s);
		$("#searchForm").submit();
		return false;
	}
</script>
	</div>
	</div>
</body>
</html>
